<meta title="会员收益" />
<div class="p">
    <div class="m-b clearfix">
        <form class="form-inline" id="form">
            <input autocomplete="off" type="text" class="form-control input-sm" name="userId" placeholder="用户ID" />
            <select class="form-control input-sm" name="timeDimension">
                <option value="NONE">选择维度</option>
                <option value="DAY">按日</option>
                <option value="MONTH">按月</option>
            </select>
            <input type="hidden" name="page" id="page" value="1" />
            <button type="button" class="btn btn-default btn-sm" s-click="$page.node.val(1); $userCommissionEarningsGrid.refresh()">查询</button>
        </form>
    </div>
    <div id="userCommissionEarningsGrid"
         s='datac,nda'
         s-data="S.get('/api/user-commission-earning', $form.node.serialize())">
        <table class="table table-striped table-bordered table-hover user-commission-order-list">
            <tr>
                <th>维度</th>
                <th>用户</th>
                <th>订单数</th>
                <th>预估</th>
                <th>结算</th>
                <th>操作</th>
            </tr>
            <tbody s="loop" s-data-filter="'results'">
            <tr s-loop-role="empty">
                <td colspan="6">暂无数据</td>
            </tr>
            <tr s-loop-role="row" s-check-role="i" s="datac" class="userCommissionEarning">
                <td name="date"></td>
                <td s="tpl">
                    <div style="display: flex; flex-direction: row">
                        <img src="{%=this.userAvatar%}" style="max-width: 50px; max-height: 50px;" class="pull-left" />
                        <div style="flex: 1; margin-left: 10px;">
                            <div>ID: {%=this.userId%}</div>
                            <div>{%=this.userNickname%}</div>
                            <div class="text-warning">{%=this.userPhone%}</div>
                        </div>
                    </div>
                </td>
                <td>
                    <table class="table-bordered table table-condensed table-striped inner-table">
                        <tr>
                            <th style="width: 100px" class='text-right'>已付款</th>
                            <td style="width: 120px" name="paidOrderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'>待结算</th>
                            <td style="width: 120px" name="waitSettleOrderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'>已计算</th>
                            <td style="width: 120px" name="settledOrderNum" class="text-right"></td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>总数</th>
                            <td style="width: 120px" name="orderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'>自购</th>
                            <td style="width: 120px" name="selfBuyOrderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'>直推</th>
                            <td style="width: 120px" name="directOrderNum" class="text-right"></td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>间推</th>
                            <td style="width: 120px" name="indirectOrderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'>运营商</th>
                            <td style="width: 120px" name="carrierOrderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'>服务商</th>
                            <td style="width: 120px" name="relationAgentOrderNum" class="text-right"></td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>市代</th>
                            <td style="width: 120px" name="cityAgentOrderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'>县/区代</th>
                            <td style="width: 120px" name="districtAgentOrderNum" class="text-right"></td>
                            <th style="width: 100px" class='text-right'></th>
                            <td></td>
                        </tr>

                    </table>
                </td>
                <td>
                    <table class="table-bordered table table-condensed table-striped inner-table">
                        <tr>
                            <th style="width: 100px" class='text-right'>预估佣金</th>
                            <td style="width: 120px" class="text-right">
                                <span name="estimateCommissionFee.toFixed(1)"></span> + <span name="estimateRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>自购预估</th>
                            <td style="width: 120px" class="text-right">
                                <span name="selfBuyEstimateCommissionFee.toFixed(1)" ></span>
                                + <span name="selfBuyEstimateRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>直推预估</th>
                            <td style="width: 120px" class="text-right">
                                <span name="directEstimateCommissionFee.toFixed(1)"></span>
                                + <span name="directEstimateRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>间推预估</th>
                            <td style="width: 120px" class="text-right">
                                <span name="indirectEstimateCommissionFee.toFixed(1)" ></span>
                                + <span name="indirectEstimateRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>运营商</th>
                            <td style="width: 120px" class="text-right">
                                <span name="carrierEstimateCommissionFee.toFixed(1)" ></span>
                                + <span name="carrierEstimateRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>市代预估</th>
                            <td style="width: 120px" class="text-right">
                                <span name="cityAgentEstimateCommissionFee.toFixed(1)" ></span>
                                + <span name="cityAgentEstimateRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>区/县代</th>
                            <td style="width: 120px" class="text-right">
                                <span name="districtAgentEstimateCommissionFee.toFixed(1)" ></span>
                                + <span name="districtAgentEstimateRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>服务商</th>
                            <td style="width: 120px" class="text-right">
                                <span name="relationAgentEstimateCommissionFee.toFixed(1)" ></span>
                                + <span name="relationAgentEstimateRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="table-bordered table table-condensed table-striped inner-table">
                        <tr>
                            <th style="width: 100px" class='text-right'>结算佣金</th>
                            <td style="width: 120px" class="text-right">
                                <span name="settledCommissionFee.toFixed(1)"></span> + <span name="settledRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>自购结算</th>
                            <td style="width: 120px" class="text-right">
                                <span name="selfBuySettledCommissionFee.toFixed(1)" ></span>
                                + <span name="selfBuySettledRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>直推结算</th>
                            <td style="width: 120px" class="text-right">
                                <span name="directSettledCommissionFee.toFixed(1)"></span>
                                + <span name="directSettledRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>间推结算</th>
                            <td style="width: 120px" class="text-right">
                                <span name="indirectSettledCommissionFee.toFixed(1)" ></span>
                                + <span name="indirectSettledRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>运营商</th>
                            <td style="width: 120px" class="text-right">
                                <span name="carrierSettledCommissionFee.toFixed(1)" ></span>
                                + <span name="carrierSettledRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>市代结算</th>
                            <td style="width: 120px" class="text-right">
                                <span name="cityAgentSettledCommissionFee.toFixed(1)" ></span>
                                + <span name="cityAgentSettledRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 100px" class='text-right'>区/县代</th>
                            <td style="width: 120px" class="text-right">
                                <span name="districtAgentSettledCommissionFee.toFixed(1)" ></span>
                                + <span name="districtAgentSettledRewardFee.toFixed(1)" ></span>
                            </td>
                            <th style="width: 100px" class='text-right'>服务商</th>
                            <td style="width: 120px" class="text-right">
                                <span name="relationAgentSettledCommissionFee.toFixed(1)" ></span>
                                + <span name="relationAgentSettledRewardFee.toFixed(1)" ></span>
                            </td>
                        </tr>
                    </table>
                </td>
                <td s="tpl">

                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="6" class="text-right">
                    共有<span name="total"></span>个数据
                    <ul s="pagination"
                        s-pagination="{action:function(){$page.node.val(this); $userCommissionEarningsGrid.refresh()}}"
                        class="pagination pagination-sm">
                    </ul>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<style>
    .user-commission-order-list dt{
        width: 70px;
    }
    .user-commission-order-list dd {
        margin-left: 70px;
    }
    .inner-table {
        margin: 0;
        font-size: 12px;
    }
</style>
<script type="text/javascript">

    S.meta.btns = [
        {
            name: '关闭',
            style: 'btn btn-default',
            click: function() {
                S.close(true)
            }
        }
    ]

</script>